<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="searchForm.name" placeholder="输入用户名" clearable @clear="search()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="prepareAddUser">新增</el-button>
      <el-button type="danger" @click="batchDelete">批量删除</el-button>
      <el-table ref="userTable"
        :data="userList.records"
        border stripe
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="password"
          label="密码">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="更新时间">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template slot-scope="scope">
            <el-switch @change="updateStatus(scope.row.id,scope.row.status)"
                       v-model="scope.row.status===1?true:false">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button type="text" @click="prepareModifyUser(scope.row)">编辑</el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button type="text" @click="deleteUser(scope.row)">删除</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="searchForm.pageNo"
        :page-sizes="[10,20,50, 100, 200, 300]"
        :page-size="searchForm.pageSize"
        layout="total,sizes, prev, pager, next,jumper"
        :total="userList.total">
      </el-pagination>
    </el-card>

    <el-dialog
      title="新增用户"
      :visible.sync="addUserDialogVisible"
      width="30%"
      :before-close="addUserDialogClose":close-on-click-modal="false">
      <el-form ref="addUserRef" :model="addUserForm" :rules="addUserFormRules" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="addUserForm.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="addUserForm.status" placeholder="请选择">
            <el-option
              v-for="item in addUserFormPrepareData.status" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveUser()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "User",
  data() {
    return {
      addUserFormPrepareData: {
        status: [{
          label: "启用",
          value: 1
        }, {
          label: "禁用",
          value: -1
        }]
      },
      searchForm: {
        name: "",
        password: "",
        pageNo: 1,
        pageSize: 20
      },
      userList: {},
      addUserDialogVisible: false,
      addUserDialogTitle: "",
      operatorUser: '',
      addUserForm: {
        id: '',
        name: '',
        password: '',
        status: 1
      },
      addUserFormRules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 5, max: 100, message: '长度在 6 到 100 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 100, message: '长度在 6 到 100 个字符', trigger: 'blur' }
          ]
      }
    }
  },
  created() {
    this.search();
  },
  methods: {
    search() {
      this.$http.post("/user/queryUserPage", this.searchForm).then(response => {
        this.userList = response.data;
      }).catch(error => {})
    },
    reset() {
      this.$refs.searchForm.resetFields();
      this.search()
    },
    handleSizeChange(size) {
      this.searchForm.pageSize = size;
      this.search();
    },
    handleCurrentChange(currentPage) {
      this.searchForm.pageNo = currentPage;
      this.search();
    },
    updateStatus(id, status) {
      if (status === 1) {
        status = 0;
      } else if (status === 0) {
        status = 1;
      }
      this.$http.post(`/user/updateUserStatus`, { ids:[id], status: status }).then(response => {
        this.$message.success("更新状态成功");
        this.search();
      }).catch(error => {})
    },
    addUserDialogClose() {
      this.addUserDialogVisible = false;
    },
    prepareAddUser() {
      this.operatorUser = 'add'
      this.addUserDialogTitle = "新增用户";
      this.addUserDialogVisible = true;
    },
    saveUser() {
      this.$refs.addUserRef.validate((valid) => {
        if (valid) {
          if(this.operatorUser === 'add'){
            this.$http.post("user/addUser", this.addUserForm).then(response => {
              this.$message.success("新增用户成功");
              this.addUserDialogVisible = false;
              this.$refs.addUserRef.resetFields();
              this.search();
            }).catch(error => {})
          }else if(this.operatorUser ==='modify'){
            this.$http.post("user/updateUser", this.addUserForm).then(response => {
              this.$message.success("修改用户成功");
              this.addUserDialogVisible = false;
              this.$refs.addUserRef.resetFields();
              this.search();
            }).catch(error => {})
          }

        }
      })
    },
    prepareModifyUser(user) {
      this.operatorUser = 'modify'
      this.addUserForm  = {...user};
      this.addUserDialogVisible = true
      this.addUserDialogTitle= '修改用户'
    },
    deleteUser(row) {
      const ids = []
      ids.push(row.id)
      this.$confirm(`确认删除[${row.name}]该用户吗？`)
       .then(() => {
         this.$http.post(`/user/delUser`,ids).then(response => {
            this.$message.success("删除用户成功");
            this.search();
          }).catch(error => {})
       })

    },
    batchDelete() {
      const selectedUsers = this.$refs.userTable.selection;
      if (selectedUsers.length > 0) {
        const ids = selectedUsers.map(user => user.id);
        this.$confirm(`确认删除选中的用户吗？`)
          .then(() => {
            this.$http.post(`/user/delUser`,ids).then(response => {
              this.$message.success("删除用户成功");
              this.search();
            }).catch(error => {})
          })
      }else {
        this.$message.warning("请选择需要删除的用户");
      }
    }
  }
}
</script>
<style scoped lang="less">
.box-card {
  margin-top: 20px;
}
</style>
